import React, {Component} from 'react'
import {Button} from "primereact/button";
import {ProgressSpinner} from "primereact/progressspinner";

export default class NewsDialog extends Component {

    constructor() {
        super();
        this.state = {}
    }


    render() {
        let datas = [
            {
                days: "2018-9-5 星期三",
                contents: [
                    {
                        created: "12:33",
                        title: "以新发展理念促进区块链应用等数字经济健康发展",
                        contents: "支持所有基于以太坊的符合 ERC 20 标准的代币、井通体系的代币以及其他将来会支持 的MOAC，EOS等系"
                    },
                    {
                        created: "12:33",
                        title: "以新发展理念促进区块链应用等数字经济健康发展",
                        contents: "支持所有基于以太坊的符合 ERC 20 标准的代币、井通体系的代币以及其他将来会支持 的MOAC，EOS等系"
                    },
                ],
            },
            {
                days: "2018-9-6 星期四",
                contents: [
                    {
                        created: "10:33",
                        title: "以新发展理念促进区块链应用等数字经济健康发展",
                        contents: "支持所有基于以太坊的符合 ERC 20 标准的代币、井通体系的代币以及其他将来会支持 的MOAC，EOS等系"
                    },

                ],
            },
        ]

        let nodeList = datas && datas.map((val, i) => {

            return <div>
                <h3>{val.days}</h3>
                {val.contents.map((value, index) => {
                    return (
                        <div>
                            <div className="p-g-1"></div>
                            <div className="clearfix p-g-11"
                                 style={{position: "relative", borderLeft: "1px solid green"}}>
                                <div className="p-g-2 ">
                                    <i className="pi pi-circle-on"
                                       style={{color: "#00b5ad", position: "absolute", left: "-10px", top: "25px"}}></i>
                                    <span className="p-g-8">{value.created}</span>
                                </div>
                                <div className="p-g-9">
                                    <h4>{value.title}</h4>
                                    <p style={{padding: "0"}}>{value.contents}</p>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        })
        return (

            <div style={{minWidth: "400px", position: "relative"}}>
                {nodeList}

                {
                    this.state.loading &&
                    <div style={{textAlign: "center"}}>
                        <ProgressSpinner style={{width: "50px"}}/>
                    </div>
                }


                <div style={{textAlign: "center"}}>
                    <Button style={{width: '100px'}} onClick={() => this.setState({loading: true})}
                            label="加载更多" className="p-button-success"/>
                </div>
            </div>
        )
    }
}